/**
 * Created by guiyongdong on 16/9/30.
 */
'use strict';

import  React, {Component} from 'react';
import  {
    StyleSheet,
    View,
    Image,
    TouchableOpacity,
    Dimensions
} from 'react-native';

import Swiper from 'react-native-swiper';
import ViewPager from 'react-native-viewpager';


export  default class ImageScrollView extends  Component {

    // 构造
      constructor(props) {
        super(props);
          var dataSource = new ViewPager.DataSource({
              pageHasChanged: (p1, p2) => p1 !== p2
          });
        // 初始状态
        this.state = {
            dataSource: dataSource.cloneWithPages(this.props.imageUrlArray)
        };
      }
    render() {
        return(
            <View style={this.props.style}>
                <ViewPager
                    style={{flex:1,backgroundColor:'red'}}
                    dataSource={this.state.dataSource}
                    renderPage={this._renderPage.bind(this)}
                    isLoop={true}
                    autoPlay={true}
                    />
            </View>
        )
    }
    _renderPage (data, pageID){
        return (
            <TouchableOpacity activeOpacity={0.8} onPress={()=>{
                this.props.imageClick(pageID);
            }}>
                <Image
                    source={{uri: data}}
                    style={styles.slide} />
            </TouchableOpacity>
        );
    }
}



const styles = StyleSheet.create({
    slide:{
        flex:1,
        width:Dimensions.get('window').width,
        height: Dimensions.get('window').width/375.0*120
    },
    bgDot:{
        backgroundColor:'white',
        width:8,
        height:8,
        borderRadius:4,
        marginLeft:3,
        marginTop:40,
        marginRight:3,
        marginBottom:0
    },
    fgDot:{
        backgroundColor:'#FF6261',
        width:10,
        height:10,
        borderRadius:5,
        marginBottom:10
    }
});